<template>
  <div class="cargo-structure-container">
    <div class="cargo-structure-title">{{ title }}</div>
    <bsc-subtitle :subtitle="subtitle" class="subtitle" @click="showDialog" />
    <div class="chart-container">
      <div id="chart" ref="chart" class="chart"></div>
    </div>

    <!-- 大屏可视化风格弹窗 -->
    <modal-dialog
      :visible="dialogVisible"
      title="详细信息"
      @close="closeDialog"
    >
      <div class="content-inner" style="width: 100%; height: 300px">
        <v-chart
          style="width: 100%; height: 100%"
          :option="option"
          autoresize
        />
      </div>
    </modal-dialog>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import * as echarts from "echarts";
import VChart from "vue-echarts";
import BscSubtitle from "./subtitle.vue";
import ModalDialog from "./modal-dialog.vue";
// const chartDom = document.getElementById("chart");
// const myChart = echarts.init(chartDom);

const pieData = [
  { name: "天然气", value: 3320 },
  { name: "电力", value: 1120 },
  { name: "汽油", value: 1258 },
  { name: "无烟煤", value: 2540 },
  { name: "石油", value: 2540 },
];

export default {
  name: "CargoStructure",
  components: {
    // eslint-disable-next-line vue/no-unused-components
    VChart,
    BscSubtitle,
    ModalDialog,
  },
  props: {
    title: {
      type: String,
      required: true,
      default: "默认标题",
    },
  },
  data() {
    return {
      subtitle: "货源分布",
      chartInstance: undefined,
      pieData: [
        { name: "天然气", value: 3320 },
        { name: "电力", value: 1120 },
        { name: "汽油", value: 1258 },
        { name: "无烟煤", value: 2540 },
        { name: "石油", value: 2540 },
      ],
      rotate: -60,
      animationFrame: null,
      dialogVisible: false, // 弹窗显示状态，默认关闭
      option: {
        backgroundColor: "transparent",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          backgroundColor: "rgba(9, 24, 48, 0.5)",
          borderColor: "rgba(75, 253, 238, 0.4)",
          textStyle: {
            color: "#CFE3FC",
          },
          borderWidth: 1,
        },
        legend: {
          textStyle: {
            color: "#fff",
          },
        },
        grid: {
          top: "15%",
          right: "5%",
          left: "5%",
          bottom: "12%",
        },
        xAxis: [
          {
            name: "月份",
            type: "category",
            data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            axisLine: {
              lineStyle: {
                color: "#FFFFFF",
              },
            },
            axisLabel: {
              margin: 10,
              color: "#e2e9ff",
              textStyle: {
                fontSize: 12,
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            name: "吨",
            axisLabel: {
              formatter: "{value}",
              color: "#e2e9ff",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#FFFFFF",
              },
            },
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.12)",
              },
            },
          },
        ],
        series: [
          {
            type: "bar",
            stack: "Ad",
            data: [100, 150, 185, 340, 275],
            emphasis: {
              focus: "series",
            },
            // barWidth: "30%",
            // itemStyle: {
            //   normal: {
            //     color: new echarts.graphic.LinearGradient(
            //       0,
            //       0,
            //       0,
            //       1,
            //       [
            //         {
            //           offset: 0,
            //           color: "rgba(0,244,255,1)", // 0% 处的颜色
            //         },
            //         {
            //           offset: 1,
            //           color: "rgba(0,77,167,1)", // 100% 处的颜色
            //         },
            //       ],
            //       false
            //     ),
            //     shadowColor: "rgba(0,160,221,1)",
            //     shadowBlur: 4,
            //   },
            // },
            // label: {
            //   normal: {
            //     show: true,
            //     lineHeight: 10,
            //     formatter: "{c}",
            //     position: "top",
            //     textStyle: {
            //       color: "#00D6F9",
            //       fontSize: 12,
            //     },
            //   },
            // },
          },
          {
            name: "Union Ads",
            type: "bar",
            stack: "Ad",
            emphasis: {
              focus: "series",
            },
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "Video Ads",
            type: "bar",
            stack: "Ad",
            emphasis: {
              focus: "series",
            },
            data: [150, 232, 201, 154, 190, 330, 410],
          },
          {
            name: "1111",
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
          },
          {
            name: "2222",
            data: [123, 123, 222, 21, 15, 147, 260],
            type: "line",
          },
        ],
      },
    };
  },
  computed: {},
  mounted() {
    this.$nextTick(() => {
      this.initEcharts();
    });
  },
  methods: {
    initEcharts() {
      this.chartInstance = echarts.init(this.$refs.chart);

      var data = [];
      var color = [
        "#00ffff",
        "#00cfff",
        "#006ced",
        "#ffe000",
        "#ffa800",
        "#ff5b00",
        "#ff3000",
      ];
      for (var i = 0; i < this.pieData.length; i++) {
        data.push({
          value: this.pieData[i].value,
          name: this.pieData[i].name,
          itemStyle: {
            normal: {
              borderWidth: 5,
              shadowBlur: 10,
              shadowColor: color[i],
            },
          },
        });
      }
      console.log(data);
      const option = {
        color: color,
        textStyle: {
          fontSize: this.$utils.transformFontSize(16),
        },
        backgroundColor: "transparent",
        tooltip: {
          trigger: "item",
          extraCssText:
            "width:auto;height:auto;background-color:#303742;color:#fff;border:none",
          axisPointer: {
            type: "shadow",
          },
          textStyle: {
            color: "rgba(252, 249, 249, 1)",
          },
        },
        graphic: {
          elements: [],
        },
        legend: {
          itemWidth: 15,
          itemHeight: 15,
          textStyle: {
            color: "#fff",
            fontSize: this.$utils.transformFontSize(14),
          },
          orient: "vertical",
          left: "60%",
          top: "15%",
          itemGap: 12,
          formatter: (item) => {
            const data = pieData;
            let sum = 0;
            data.forEach((item) => {
              sum += parseInt(item.value);
            });
            for (let i = 0; i < data.length; i++) {
              if (data[i].name === item) {
                return `${item}  ${(!parseInt(data[i].value)
                  ? 0
                  : (data[i].value / sum) * 100
                ).toFixed(2)}%`;
              }
            }
          },
        },

        series: [
          {
            type: "pie",
            radius: ["62%", "70%"],
            center: ["28%", "50%"],
            padAngle: 5, // 增加间隙角度，原为5
            label: {
              show: false,
            },
            itemStyle: {
              borderWidth: 8,
              borderRadius: 10,
            },
            emphasis: {
              scale: false,
            },
            data: data,
          },
          {
            type: "pie",
            radius: ["40%", "45%"],
            center: ["28%", "50%"],
            padAngle: 5,
            label: {
              show: false,
            },
            itemStyle: {
              borderWidth: 8,
              borderRadius: 10,
              opacity: 0.5,
            },
            emphasis: {
              scale: false,
            },
            data: pieData,
          },
        ],
      };
      const run = (rotate = -60, deg = 50) => {
        option.series[1].startAngle = rotate;
        this.chartInstance.setOption(option);
        this.chartInstance.resize();
        // 控制速度
        rotate -= 0.8;
        deg += 0.1;
        if (deg > 80) {
          deg = 50;
        }
        requestAnimationFrame(() => run(rotate, deg));
      };
      run();
    },
    // 显示弹窗
    showDialog() {
      console.log(111);
      this.dialogVisible = true;
    },
    // 关闭弹窗
    closeDialog() {
      this.dialogVisible = false;
    },
  },
};
</script>

<style scoped lang="scss">
.cargo-structure-container {
  width: 100%;
  height: 100%;
  position: relative;
  color: #fff;
  background: url("~@/assets/images/bsc_r1.png") left center / 100% 100%
    no-repeat;
  display: flex;
  flex-direction: column;

  .cargo-structure-title {
    position: absolute;
    top: 2px;
    font-size: 18px;
    font-weight: 600;
    width: 100%;
    text-align: center;
    text-shadow: rgb(0, 117, 255) 0px 0px 8px;
    padding: 0px;
  }

  .chart-container {
    flex: 1;
    width: 100%;
    margin-top: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .subtitle {
    top: 32px;
    z-index: 10;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  .chart {
    width: 90%;
    height: 90%;
  }
}
</style>
